<template>
  <div style="width: 100%;height: 100%;">
    <el-backtop :bottom="60"></el-backtop>
    <el-page-header style="margin-top: 10px; margin-bottom: 10px;" @back="goBack" content="所有医院"></el-page-header>
    <div style="padding: 10px 0">
      <el-input style="width: 80%;" size="medium" placeholder="请输入医院关键字" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button class="ml-5" size="medium" type="primary" @click="load" plain>搜索</el-button>
      <el-button class="ml-5" size="medium" type="warning" @click="reset" plain>重置</el-button>
    </div>

    <el-card>
       <div style="margin-bottom: 10px"><span class="s1" style="padding-right: 10px; margin-right: 10px; border-right: solid 1px grey">医院等级</span><el-button style="border: 0; color: #0d6efd" @click="clickGrade(grade)" v-for="grade in grades"  :key="grade">{{ grade }}</el-button></div>
       <div><span class="s1" style="padding-right: 10px; margin-right: 10px; border-right: solid 1px grey">医院类型</span><el-button style="border: 0; color: #0d6efd" @click="clickType(type)" v-for="type in types" :key="type">{{ type }}</el-button></div>
    </el-card>

    <el-empty description="暂无医院" v-if="hospitals.length === 0"></el-empty>
    <div v-else>
      <div style="margin-bottom: 20px; margin-left: 10px">
        <span style="color: gray; font-size: 10px; ">共 {{total}} 家医院</span>
      </div>
      <div style="background-color: white;height: 180px; margin-bottom: 10px; border-bottom: solid 1px #9A9A9A" v-for="hospital in hospitals" :key="hospital.id">
        <div style="float: left;margin-top: 20px; margin-left: 20px">
          <img :src="hospital.picture" width="180" height="130" class="head_pic"/>
        </div>
        <div class="box-card" style="padding-left: 20px; padding-top: 18px; float: left;">
          <el-link type="primary" @click="$router.push({path: '/front/HosInfo',query:{hosId: hospital.id,flag: 'info'}})">{{hospital.name }}</el-link>
          <span style="font-size: 10px; color: dimgrey; margin-left: 10px">{{ hospital.type }}</span>
          <el-tag color="#FFEED1" style="color: #ff9900;font-size: 5px;margin-left: 10px; margin-bottom: 10px">{{ hospital.grade }}</el-tag><br />
          <span style="color: dimgrey">地址：</span><span style="padding-top: 10px">{{ hospital.address }}</span><br />
          <div style="padding-top: 10px" class="text-wrapper">
            <span style="color: dimgrey">电话：</span><span style="padding-top: 10px">{{ hospital.phone }}</span><br />
          </div>
          <div style="padding-top: 10px" class="text-wrapper">
          <span style="width: 900px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;">
            <span style="color: dimgrey;">简介：</span>{{ hospital.outline }}</span><br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AllHospital",
  data() {
    return {
      hospitals: {},
      total: 0,
      name: "",
      type: "",
      address: "",
      grade: "",
      types: ["综合医院","传染病医院","精神病医院","中医医院"],
      grades: ["三级甲等","三级医院","二级医院","一级医院","其他"]
    }
  },
 created() {
    this.load()
 },
  methods: {
    clickGrade(grade){
      this.name = ""
      this.type = ""
      this.address = ""
      this.grade = grade
      this.load()
    },
    clickType(type){
      this.name = ""
      this.address = ""
      this.grade = ""
      this.type = type
      this.load()
    },
    load() {
      this.request.get("/hospital/findAll", {
        params: {
          name: this.name,
          type: this.type,
          address: this.address,
          grade: this.grade
        }
      }).then(res => {
        console.log(res)
        this.hospitals = res.data
        this.total = res.total
      })
    },
    reset() {
      this.name = ""
      this.type = ""
      this.address = ""
      this.grade = ""
      this.load()
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>
